<template>
    <div class="app-container">
      <el-row>
        <el-col :span="24" class="top">
          <Search @handleSearch="handleSearch"></Search>
          <Operate @operateAction="operateAction"></Operate>
          <Table :itemList="itemList" @operateAction="operateAction" @handleSelectionChange="handleSelectionChange">
            <template v-slot:user = "value">
              <div>id：{{itemList[value.slotRow].userModel.id}}</div>
              <div >手机号：{{itemList[value.slotRow].userModel.phone}}</div>
            </template>
          </Table>
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize > 0"
            :total="totalSize"
            :page.sync="page"
            :limit.sync="size"
            @pagination="getItemList"
          />
        </el-col>
      </el-row>
      <updateDialog ref="updateDialog" @submitAction="submitAction"></updateDialog>
    </div>
  </template>
  
  <script>
  import {
    findTableList, updateTable
  } from '@/api/interface/table.js'
  import { getFormList, getFormData } from '@/api/interface/operate.js'
  export default {
    components: {},
    data() {
      return {
        page: 1,
        size: 20,
        totalSize: 0,
        itemList: [],
        searchParams: {},
      }
    },
    created(){
      this.getItemList()
      this.getFormData()
    },
    methods:{
      handleSearch(searchParams){
        this.searchParams = searchParams
        this.page = 1
        this.getItemList()
      },
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      operateAction(operate, val){
        switch (operate.key) {
          case 'create':
            
            break;
          case 'update':
            this.$refs.updateDialog.show(val)
            break;
      
          default:
              break;
        }
      },
      // 提交表单
      submitAction(val){
        console.log('val', val)
        this.$refs.updateDialog.close()
      },
      getFormData(){
        getFormData({formId: this.$route.meta.formModel.id}).then(res=>{
          if (res.data.code == 10000) {
            this.$route.meta.fieldList = res.data.data.fieldList
            this.$route.meta.operateList = res.data.data.operateList
          }
        })
      },
      getItemList() {
          this.searchParams.page = this.page
          this.searchParams.size = this.size
          getFormList(this.$route.meta.formModel.url, this.searchParams).then(res => {
            if (res.data.code == 10000) {
              this.totalSize = res.data.data.total_count
              this.itemList = res.data.data.list
            }
          });
        },
    },
  }
  </script>
  
  
  <style lang="scss" scoped>
  
  </style>
  